<template>
    <div class="flex justify-between mt-[20px]">
        <div class="flex">
            <img src="../assets1/logo.png" alt="" >
            <h1>战略微头条</h1>
        </div>
        <div>
            <el-dropdown class="mr-[20px]">
            <div class="userName">用户名</div>
            <template #dropdown>
              <el-dropdown-menu style="min-width: 12vw;">
                <el-dropdown-item><el-icon>
                    <User />
                  </el-icon>个人中心</el-dropdown-item>
                <el-dropdown-item><el-icon>
                    <Setting />
                  </el-icon>个人设置</el-dropdown-item>
                <el-dropdown-item style="border-top: 1px solid #eee;" @click='handleLogout'><el-icon>
                    <SwitchButton />
                  </el-icon>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

            <el-dropdown>
                <span class="el-dropdown-link">
                    切换语言
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>中文</el-dropdown-item>
                        <el-dropdown-item>英文</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import {User,Setting,SwitchButton, ArrowDown } from '@element-plus/icons-vue'

const handleLogout = () => {
  localStorage.removeItem('login')
  location.reload()
}
</script>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
